<!--
 * @Author: libaihao 22857108132qq.com
 * @Date: 2022-07-22 11:03:35
 * @LastEditors: libaihao 22857108132qq.com
 * @LastEditTime: 2022-10-26 09:29:08
 * @FilePath: \vue02\src\views\Login.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>

    <div>
      <el-row>
       <el-col :span="24" style="height:65px;background-color:rgba(102,177,255,0.1);font-size: 32px;display:flex;justify-content: center;">
        <!-- <div style="height:65px;width:100px;background-color: white;">logo</div> -->
        <div class="grid-content bg-purple-dark" style="height:65px;display:flex;justify-content: center;align-items: center;">ikun论坛</div>
      </el-col>
      </el-row>
    </div>

  <div style="display: flex;justify-content: center">
    <el-card class="box-card" style="width: 450px;margin-top: 10%;background-color: rgba(255,255,255, 0.5);">
      <div slot="header" class="clearfix">
        <span style="display:flex;justify-content: center;font-weight: bolder;font-size: x-large;">超级管理员登录</span>
      </div>
      <div>
        <el-row>
          <el-col :span="6" ><div style="display: flex;justify-content: center;align-items:center;height: 40px" >用 户 名：</div></el-col>
          <el-col :span="18"><div><el-input type="text" @keydown.enter.native="doLogin" v-model="user.username" placeholder="请输入手机号"></el-input></div></el-col>
        </el-row>
        <el-row style="margin-top: 10px">
         <el-col :span="6"><div style="display: flex;justify-content: center;align-items:center;height: 40px">用户密码：</div></el-col>
          <el-col :span="18"><div><el-input @keydown.enter.native="doLogin" v-model="user.password" type="password" show-password
          placeholder="请输入密码"></el-input></div></el-col>
        </el-row>
        <el-row>
          <el-col style="display:flex;justify-content: center;align-items:center;height: 40px">
          <el-checkbox v-model="checked" style="margin-left: 10px;">记住密码</el-checkbox><el-col><el-button type="text" @click="openCad" style="margin-left: 70%;">找回密码</el-button>

<el-dialog
  
  title="找回密码"
  :visible.sync="dialogVisible"
  width="480px"
  :before-close="handleClose" >
  <el-form ref="form" :model="form" label-width="20%"  :rules="rules" style="text-align: left;">
  <el-form-item label="账号:">
    <el-input v-model="form.telephone" placeholder="请输入手机号" style="width: 80%;"></el-input>
  </el-form-item>
  <el-form-item label="验证码:">
    <el-input v-model="form.ValidateCode" placeholder="请输入验证码" style="width:40%"></el-input>
    <el-button style="width:40% ;"  @click="sendValidateCode" id="sendVcode">发送验证码</el-button>
  </el-form-item>
  <el-form-item label="新密码:" prop="pass">
    <el-input v-model="form.password" placeholder="请输入新密码" style="width:80%"></el-input>
  </el-form-item>
  <el-form-item label="重复输入:" prop="checkPass">
    <el-input v-model="form.password_" placeholder="请再次输入新密码" style="width:80%"></el-input>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取消</el-button>
    <el-button type="primary" @click="comitUpdate">确认修改</el-button>
  </span>
</el-dialog>
</el-col>
</el-col>
          
        </el-row>  
        
        <el-row style="margin-top: 20px">
          <el-col :span="24">
            <div style="display: flex;justify-content: center"><el-button type="primary" style="width: 80%" @click="doLogin">登录</el-button></div></el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</div>
</template>

<script>
//import router from "@/router";
//import {postKeyValueRequest} from "@/utils/api";



//const axios = require('axios').default;
export default {
name: "Login",
  data(){
    var validatePass = (rule, value, callback) => {
      
        if (this.form.password === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.form.password_ !== '') {
            this.$refs.form.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (this.form.password_ === '') {
          callback(new Error('请再次输入密码'));
        } else if (this.form.password_ !== this.form.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
  return{
    user:{
      username:'admin',
      password:'123456'
    },
    form:{
      telephone: '',
      password: '',
      password_: '',
      message1: 'aaa',
    },
    checked: false,
    dialogVisible: false,
    rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
        }
    
  }
  },

  methods:{
    openCad(){
      this.form.telephone =  '';
      this.form.password = '';
      this.form.password_ = '';
      this.dialogVisible = true;
    },
    comitUpdate(){
      this.$confirm('是否确认修改密码?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.dialogVisible = false;
          this.$message({
            type: 'info',
            message: '修改成功'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      
    },
    /**
     * 发送验证码
     */
     sendValidateCode(){
        //判断 电话的 输入格式 是否正确
        
        var phone = this.form.telephone;
        var ab = /1[3,4,5,7,8][0-9]{9}$/;
        if (ab.test(phone) == false)
            {   if(phone == '' || phone == null){
              this.$message.error("电话号码不能为空");
              return ; 
            }
                this.$message.error("请输入正确的电话格式");
                return ;
            }
        var time = 30;
        var but1 = document.getElementById('sendVcode');
        var timer = setInterval(function(){
          
          if(time == 0){
            clearInterval(timer);
            but1.removeAttribute('disabled');
            
            but1.innerHTML = '重新发送';
            time = 30;
          }else{
            but1.disabled = 'true';
            but1.innerHTML = time + '秒后重发';
            time--;
            
          }
        },1000)
     },

  doLogin() {
    if(this.user.username==''){
      this.$message('请输入手机号码');
      return;
    }
    if(this.user.password==''){
      this.$message('请输入密码');
      return;
    }
    let that = this;
    this.postKeyValueRequest('/login',this.user).then(resp=>{
      //if (resp){
        //说明请求成功
        //push是入栈，可回退
        //保存用户信息Cookie,sessionStorage(浏览器关闭，自动删除),
        //将用户信息转换成字符串，传入sessionStorage
        window.sessionStorage.setItem("user",JSON.stringify(resp.name));
        let redirect = this.$router.currentRoute.query.redirect;
        //replace是替换，不可后退
        that.$router.replace(redirect?redirect:'/home');
      //}
    })
  },
  handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
  }
}
</script>

<style scoped>

</style>